<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const ConductivityData = ref()
const MoistureData = ref()
const NitrogenData = ref()
const PhData = ref()
const TemperatureData = ref()
const deviceList = ref()
const carouselData = ref([])

import { getConductivityDataService, getMoistureDataService, getNitrogenDataService, getPHDataService, getTemperatureDataService, getPicyureService, getVideoService } from '@/api/device.js'

// 获取传感器数据
const getSensorData = async () => {
  let conductivityResult = await getConductivityDataService()
  ConductivityData.value = conductivityResult.data

  let moistureResult = await getMoistureDataService()
  MoistureData.value = moistureResult.data

  let nitrogenResult = await getNitrogenDataService()
  NitrogenData.value = nitrogenResult.data

  let phResult = await getPHDataService()
  PhData.value = phResult.data

  let temperatureResult = await getTemperatureDataService()
  TemperatureData.value = temperatureResult.data

  initCharts()
}

// 获取轮播图数据
const getCarouselData = async () => {
  let result = await getPicyureService()
  carouselData.value = result.data
}

import { getDevicessService } from '@/api/device.js'

// 添加获取设备信息的方法
const getDevices = async () => {
  try {
    const result = await getDevicessService()
    deviceList.value = result.data
  } catch (error) {
    console.error('获取设备信息失败:', error)
  }
}

// 初始化图表数据
const initCharts = () => {
  if (!ConductivityData.value || !MoistureData.value || !NitrogenData.value || !PhData.value || !TemperatureData.value) return

  // 土壤电导率图表
  const chart1 = echarts.init(document.querySelector('#chart1'))
  chart1.setOption({
    title: { text: '土壤电导率变化', textStyle: { fontSize: 18, color: '#fff' } },
    xAxis: { type: 'category', data: ConductivityData.value.map(item => item.date), axisLabel: { textStyle: { fontSize: 14, color: '#fff' } } },
    yAxis: { type: 'value', axisLabel: { textStyle: { fontSize: 14, color: '#fff' } } },
    series: [{ data: ConductivityData.value.map(item => item.value), type: 'line', label: { show: true, position: 'top', textStyle: { fontSize: 14, color: '#fff' } } }]
  })

  // 土壤含水率图表
  const chart2 = echarts.init(document.querySelector('#chart2'))
  chart2.setOption({
    title: { text: '土壤含水率', textStyle: { fontSize: 18, color: '#fff' } },
    series: [{
      type: 'pie',
      data: [
        { value: MoistureData.value.value, name: '含水量' },
        { value: 100 - MoistureData.value.value, name: '其他' }
      ],
      label: { textStyle: { fontSize: 14, color: '#fff' }, formatter: '{b}: {c}%' }
    }] 
  })

  // 土壤氮含量图表
  const chart3 = echarts.init(document.querySelector('#chart3'))
  chart3.setOption({
    title: { text: '土壤氮含量变化', textStyle: { fontSize: 18, color: '#fff' } },
    xAxis: { type: 'category', data: NitrogenData.value.map(item => item.date), axisLabel: { textStyle: { fontSize: 14, color: '#fff' } } },
    yAxis: { type: 'value', axisLabel: { textStyle: { fontSize: 14, color: '#fff' } } },
    series: [{ data: NitrogenData.value.map(item => item.value), type: 'bar', label: { show: true, position: 'top', textStyle: { fontSize: 14, color: '#fff' } } }]
  })

  // 土壤ph图表
  const chart4 = echarts.init(document.querySelector('#chart4'))
  chart4.setOption({
    title: { text: '土壤PH值变化', textStyle: { fontSize: 18, color: '#fff' } },
    series: [{
      type: 'gauge',
      detail: { formatter: '{value}', textStyle: { fontSize: 18, color: '#fff' } },
      data: [{ value: PhData.value.value, name: 'PH值' }]
    }]
  })

  // 土壤温度图表
  const chart5 = echarts.init(document.querySelector('#chart5'))
  chart5.setOption({
    title: { text: '土壤温度变化', textStyle: { fontSize: 18, color: '#fff' } },
    xAxis: { type: 'category', data: TemperatureData.value.map(item => item.date), axisLabel: { textStyle: { fontSize: 14, color: '#fff' } } },
    yAxis: { type: 'value', axisLabel: { textStyle: { fontSize: 14, color: '#fff' } } },
    series: [{ data: TemperatureData.value.map(item => item.value), type: 'line', label: { show: true, position: 'top', textStyle: { fontSize: 14, color: '#fff' } } }]
  })

  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    chart1.resize()
    chart2.resize()
    chart3.resize()
    chart4.resize()
    chart5.resize()
  })
}
const videoData = ref()

import EZUIKit from 'ezuikit-js'
// 初始化监控
const initVideo = async () => {
  let result = await getVideoService()
  videoData.value = result.data
  const UIKitDEMO = new EZUIKit.EZUIKitPlayer({
    id: 'ezuikit-player',
    url: videoData.value.monitor_address,
    accessToken: videoData.value.token,
    useHardDev: true // 开启高性能模式
  })
  UIKitDEMO.play();
}

onMounted(() => {
  getSensorData()
  getDevices()
  getCarouselData()
  initVideo()
})

onUnmounted(() => {
  window.removeEventListener('resize', () => {
    chart1.resize()
    chart2.resize()
    chart3.resize()
    chart4.resize()
    chart5.resize()
  })
})
</script>
<template>
  <div class="dashboard-container">
    <!-- 顶部标题 -->
    <div class="header">
      <dv-border-box8 :style="{width: '100%', textAlign: 'center'}">
      <h1 style="margin: 0;">
        智慧大棚数据可视化平台
      </h1>
      </dv-border-box8>
    </div>

    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 左侧面板 -->
      <div class="left-panel">
        <dv-border-box-1>
          <div class="chart-item" >
            <div id="chart1" style="height: 90%; width: 100%;margin-left: 2vw;"></div>
          </div>
          <div class="chart-item" style="height: 30vh">
            <div id="chart2" style="height: 100%; width: 100%"></div>
          </div>
          <div class="chart-item" style="height: 30vh">
            <div id="chart3" style="height: 100%; width: 100%"></div>
          </div>
        </dv-border-box-1>
      </div>

      <!-- 中间面板 -->
      <div class="center-panel">
        <dv-border-box-11 style="flex: 6;">
          <!-- 视频监控区域 -->
          <div class="monitor-area">
            <div id="ezuikit-player" class="video-player"></div>
          </div>
        </dv-border-box-11>
        <!-- 设备信息表格 -->
        <dv-border-box-11 title="当前大棚序号：300822040454" :title-width="400" style=" flex: 4;">
          <div class="table-container">
            <el-table :data="deviceList" style="width: 95%; height: 75%; ">
              <el-table-column prop="name" label="设备名称" />
              <el-table-column prop="category" label="设备类型" />
              <el-table-column prop="serial_number" label="序列号" />
              <el-table-column prop="unit" label="单位">
                <template #default="scope">
                  {{ scope.row.unit || '-' }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </dv-border-box-11>
      </div>

      <!-- 右侧面板 -->
      <div class="right-panel">
        <dv-border-box-1>
          <div class="chart-item" style="height: 30vh">
            <div id="chart4" style="height: 90%; width: 100%;margin-left: 2vw;"></div>
          </div>
          <div class="chart-item" style="height: 30vh">
            <div id="chart5" style="height: 100%; width: 100%"></div>
          </div>
          <div class="picture-carousel" style="height: 30vh">
            <el-carousel style="height: 95%;width: 100%;">
              <el-carousel-item v-for="item in carouselData" :key="item">
                <img :src="item" alt="carousel image" style="width: 90%; height: 80%;" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </dv-border-box-1>
      </div>
    </div>
  </div>
</template>

<style scoped>
.dashboard-container {
  width: 100vw;
  height: 100vh;
  background: #000f1d;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden; 
}

.header {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-content {
  flex: 1; 
  display: flex;
  gap: 20px;
  padding: 0 20px 20px 20px; 
}

.left-panel, .right-panel {
  width: 25%;
  display: flex;
  flex-direction: column;
}

.center-panel {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.chart-item {
  flex: 1; 
  margin-bottom: 10px; 
  height: 30vh;
  justify-content: center;
  align-items: center;
  display: flex;
}

.monitor-area {
  flex: 2; 
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  height: 100%;
}

.video-player {
  width: 95%;
  height: 90%;
}

.table-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.picture-carousel {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>